<template>
    <view class="container">
        <view class="topWrap">
            <view class="cardWrap">
                <image class="topIconStyle" src="../static/images/teachingMaterial/topIcon.svg" style="width: 76rpx;height: 74rpx" v-if="teachingInfo.isCollect"/>
                <image
                    :src="teachingInfo.cover"
                    :style="{ width: '128rpx', height: '100%' }" />
                <view style="margin: 28rpx 0 28rpx 42rpx;justify-content:space-between;width: 500rpx;" class="flex flex-column">
                    <view style="font-size: 32rpx;font-weight: 400;" class="oneWrap">{{ teachingInfo.name ||""}}</view>
                    <view style="color: #666666; font-size: 24rpx" class="oneWrap">编写人：{{ teachingInfo.author||"" }}</view>
                    <view style="color: #666666; font-size: 24rpx" class="oneWrap">出版社：{{ teachingInfo.publisher||"" }}</view>
                </view>
            </view>
            <view class="flex between " style="margin-top: 28rpx;">
                <button  open-type="share" class="btnStyle center" @click="onShare">
                    <image src="../static/images/teachingMaterial/shareIcon.svg" style="width: 38rpx;height: 38rpx;" />
                    <text style="margin-left: 20rpx;">分享</text>
                </button>

                <view class="btnStyle center" @click="onCollect">
                    <image :src="`../static/images/teachingMaterial/${teachingInfo.isCollect?'collectIcon':'noCollectIcon'}.svg`" 
                    style="width: 48rpx;height: 48rpx;" />
                    <text style="margin-left: 20rpx;">{{teachingInfo.isCollect?"取消":"收藏"}}</text>
                </view>
            </view>
        </view>
        <view class="bottomWrap">
            <image src="../static/images/teachingMaterial/pageFooterIcon.png" class="iconStyle" />
            <view class="mlStyle">
                <view style="color: #333;font-size: 36rpx;margin-bottom: 44rpx;" icon="photo">目录</view>
                <scroll-view :scroll-y="true" class="treeWrap" >
                    <u-collapse accordion :border="false" :value="0">
                        <u-collapse-item :title="item.structName" v-for="(item,i) in treeData" :key="item.structName"  :name="i">
                            <view v-for="itm in item.children" :key="itm.name" style="padding: 20rpx 0;"
                                @click="()=>onGoDetail(itm)">
                                {{ itm.contentName }}
                            </view>
                        </u-collapse-item>
                    </u-collapse>
                </scroll-view>
            </view>

        </view>
    </view>
</template>

<script>
import {resCollect,resCancel,textbookInfo,} from "../services/TeachingMaterialService.js"
import { getFlatToTree, notificationFun } from "../utils/PrjUtils";
import {resourcesHead } from '../services/DataDocumentService';
import {resVisit} from '../services/PracticeTestingService.js'
export default {
    data() {
        return {
            // 教材信息
            teachingInfo:{},
            treeData: []
        }
    },
    computed: {},
    methods: {
        // 跳转
        onGoDetail(record) {
            console.log(record, "---65")
            resVisit({resourceId:this.teachingInfo?.id,type:1}).then(res=>{
                uni.navigateTo({
                    url: `/teachingMaterial/showFile?fileInfo=${encodeURIComponent(JSON.stringify({url:record.contentUrl,fileName:record.contentName}))}`
                })
            })
          
        },
        //收藏和取消
        onCollect(){
            let param={resourceId:this.teachingInfo?.id,type:1}  
            // 如果是分享过来的并且没有appkey
            if(this?.teachingInfo?.isShare&&!uni.getStorageSync('appKey')){
                uni.reLaunch({
                    url: '/pages/login/login'
                })
                return;
            }         
           
            if(this.teachingInfo?.isCollect){
                resCancel(param).then(res=>{
                    notificationFun("操作成功")
                    this.onInitData(this.teachingInfo?.id)
                    // this.teachingInfo={...this.teachingInfo,isCollect:!this.teachingInfo.isCollect}
                })
            }
            else{
                resCollect(param).then(res=>{
                    notificationFun("操作成功")
                    this.onInitData(this.teachingInfo?.id)
                    // this.teachingInfo={...this.teachingInfo,isCollect:!this.teachingInfo.isCollect}
                })
              
            }
        },
         // 分享
         onShare(){
            uni.share({
                provider: "weixin",
                scene: "WXSceneSession",
                type: 1,
                summary: "快来体验练促优",
                success: function (res) {
                    console.log("success:" + JSON.stringify(res));
                },
                fail: function (err) {
                    console.log("fail:" + JSON.stringify(err));
                }
            });
        },
        // 初始化数据
        onInitData(id){
            resourcesHead(1,id).then(res=>{
                let data=res??{}
                this.teachingInfo={...this.teachingInfo,...data}
            })
        },

    },
    onLoad(option){
        // 带过来的信息 初始化数据
        const info = JSON.parse(decodeURIComponent(option.info)) || {}
        this.teachingInfo=info
        // 查询数据
        this.onInitData(info.id)
        // 查询树结构
        textbookInfo({textBookId:info.id}).then(res=>{
            console.log(res)
            this.treeData=res??[]
            // this.teachingInfo=info
        })
      
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                // console.log(res, "--26")
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })

    },
    onShow() {

    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            var that = this;
        }
        return {
            title: this.teachingInfo.name ??"分享信息",
            path: `/teachingMaterial/materialDetail?info=${encodeURIComponent(JSON.stringify({...this.teachingInfo,isShare:true}))}`,
            imageUrl: this.teachingInfo.cover??'https://hyfileonline.bjjrzy.com:19222/428f3bd1326f42e3b47e37de0ddf2607/0.jpg'
        };
    }

}
</script>

<style lang="scss">
page {
    background: #f2f2f2 !important;
}

.container {
    /* padding: 30rpx; */
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;

    .topWrap {
        height: 372rpx;
        width: 100vw;
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        padding: 50rpx 30rpx 44rpx 30rpx;
        box-sizing: border-box;

        .cardWrap {
            display: flex;
            height: 172rpx;
            /* height: calc(100vh - 552rpx); */
            padding-left: 12rpx;
            position: relative;
            .topIconStyle{
                position: absolute;
                top: 0;
                left: 12rpx;
            }
        }

        .btnStyle {
            width: 335rpx;
            height: 90rpx;
            box-shadow: 0px 1px 8px 0px #00000014;
            border-radius: 24rpx;

        }
        button::after{
 	    border: none;
        }
        button{
            position: relative;
            /* display: block; */
            margin-left: 0;
            margin-right: 0;
            padding-left: 0px;
            padding-right: 0px;
            box-sizing: border-box;
            // font-size: 18px;
            text-align: center;
            text-decoration: none;
            // line-height: 1;
            line-height: 1.35;
            // border-radius: 5px;
            -webkit-tap-highlight-color: transparent;
            overflow: hidden;
            color: #000000;
            background-color: #fff;
            width: 100%;
            height: 100%;
        }
        }

    .bottomWrap {
        height: calc(100vh - 392rpx);
        background-color: #fff;
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        position: relative;

        .iconStyle {
            position: absolute;
            top: 0;
            right: 0;
            width: 48rpx;
            height: 48rpx;

        }

        .mlStyle {
            height: 100%;
            padding: 52rpx 40rpx 52rpx 56rpx;
            .treeWrap{
                height: calc(100vh - 552rpx);
            }

        }

    }
}
</style>